<template>
	<view class="edit-pwd">
		<view class="content">
			<uni-forms ref="formRef" :rules="rules" :model="formData">
				<uni-forms-item name="oldpass">
					<view class="item">
						<view class="label"> 旧密码 </view>
						<view class="value">
							<uni-easyinput type="password" class="easy-input" v-model="formData.oldpass" placeholder="请输入旧密码" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
							<image src="/static/icon/order/right.png" class="right" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="loginpass">
					<view class="item">
						<view class="label"> 新密码 </view>
						<view class="value">
							<uni-easyinput type="password" class="easy-input" v-model="formData.loginpass" placeholder="请输入您的新密码" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
							<image src="/static/icon/order/right.png" class="right" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="quepass">
					<view class="item">
						<view class="label"> 确认新密码 </view>
						<view class="value">
							<uni-easyinput type="password" class="easy-input" v-model="formData.quepass" placeholder="请再次输入您的新密码" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
							<image src="/static/icon/order/right.png" class="right" />
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="btn" @tap="savePwd"> 保存 </view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { EditPasswordApi } from '@/service/index.js'
	import { isPWD } from '@/utils/valdate.js'
	const formRef = ref()
	const formData = ref({
		oldpass: '',   // 旧密码
		loginpass: '', // 新密码 
		quepass: '',   // 确认密码
	})
	const rules = {
		oldpass: isPWD(),
		loginpass: isPWD(),
		quepass: isPWD(),
	}
	const savePwd = () => {
		formRef.value.validate().then(() => {
			let params = { ...formData.value }
			EditPasswordApi(params).then(res => {
				uni.navigateBack()
			})
		})
	}
</script>

<style lang="scss" scoped>
	.edit-pwd {
		.content {
			padding: 0 12px;
			border-radius: 10px;
			background-color: #fff;
			box-sizing: border-box;
			.uni-forms-item {
				margin-bottom: 0;
				align-items: center;
				height: 50px;
				border-bottom: 1px solid #eeeeee;
				box-sizing: border-box;
				.item {
					height: 50px;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.label {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
						margin-right: 10px;
					}
					.value {
						flex: 1;
						margin-left: 10px;
						display: flex;
						align-items: center;
						justify-content: end;
						.right {
							width: 14px;
							height: 14px;
						}
					}
					.easy-input {
						flex: 1;
						color: #c4c4c4;
						font-size: 14px;
						font-weight: 400;
						text-align: right;
						margin-left: 10px;
					}
				}
			}
			:deep(.uni-forms-item__error) {
				left: 0;
				top: 100%;
				right: 12px;
				font-size: 12px;
				text-align: right;
				padding-bottom: 3px;
				transform: translateY(-100%);
			}
		}
		.btn {
			width: 100%;
			height: 50px;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 500;
			margin-top: 20px;
			line-height: 50px;
			text-align: center;
			background: #FF3B1E;
			border-radius: 106px
		}
	}
</style>